<template>
	<view class="bgIndex ">
		<!-- <image class="bg" src="../../static/第一行所有图标/矩形 1702.png" mode=""></image> -->
		<view class="padding20 buildingInformation">
			<view class="font-weight_bold">
				发布社群
			</view>
			<view class="">
				
				<view class=" myNmae flex-between margin-top_40rpx ">
					<view class=" ">
						标题
					</view>
					<view class="">
						<input class="uni-input" v-model="form.name" placeholder="请填写标题" />
					</view>


				</view>
				
				<view class=" myNmae flex-between margin-top_40rpx ">
					<view class=" ">
						副标题
					</view>
					<view class="">
						<input class="uni-input" v-model="form.desc" placeholder="请填写副标题" />
					</view>
				
				
				</view>
				<view class=" myNmae flex-between margin-top_40rpx ">
					<view class=" ">
						人数
					</view>
					<view class="">
						<input class="uni-input" type="number" v-model="form.allow_join_number" placeholder="请输入允许参与人数" />
					</view>


				</view>


				<view class=" myNmae flex-between margin-top_40rpx margin-bottom_30rpx">
					<view class=" ">
						入群金额
					</view>
					<view class="">
						<input class="uni-input" type="number" v-model="form.price" placeholder="请填输入入群金额" />
					</view>


				</view>
		

				<sunui-upimg1 class="margin-top_20rpx" :border="'1px dashed #bfbfbf'" :formData="imgFormData"
					:storageMode="storageMode" :header="header" :size="['200rpx', '200rpx']" btnName="上传群二维码图"
					:uploadServerUrl="upPicUrl" ref="selectimgandupload" @uploaded="imgLoaded" @change="imgsChange"
					:maxFileNumber="1"><template v-slot:icon>
						<uni-icons type="camera-filled" color="#1890FF" size="40"></uni-icons>
					</template></sunui-upimg1>


				<sunui-upimg1 class="margin-top_20rpx" :border="'1px dashed #bfbfbf'" :formData="imgFormData1"
					:storageMode="storageMode" :header="header" :size="['200rpx', '200rpx']" btnName="上传群头像"
					:uploadServerUrl="upPicUrl1" ref="selectimgandupload1" @uploaded="imgLoaded1" @change="imgsChange1"
					:maxFileNumber="1"><template v-slot:icon>
						<uni-icons type="camera-filled" color="#1890FF" size="40"></uni-icons>
					</template></sunui-upimg1>


			</view>

		</view>


		<view class="release flex" @click="releaseFn()">
			立即{{isEdit?'编辑':'添加'}}
		</view>
		<view class="" style="height: 20rpx;">

		</view>
		<!-- 添加标签 弹出框 -->
		<sunui-popup ref="pop">
			<template v-slot:content>

				<view class="v-pop-cls flex-column">
					<view class="text-align_right " style="width: 90%;">


						<uni-icons type="closeempty" @click="closeTag()" size="20"></uni-icons>

					</view>
					<text class="margin-right_50rpx">添加标签</text>
					<input placeholder="请输入2到6个字标签" v-model="singleLabel" />
					<view class="flex add" @click="singleLabelClick()">添加</view>
				</view>
			</template>
		</sunui-popup>
	</view>
</template>

<script>
	import zyTag from '@/uni_modules/zy-tag/components/zy-tag/zy-tag.vue'
	export default {
		components: {
			zyTag
		},
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				userInfo: uni.getStorageSync("userInfo"),
				yeartime: '',
				//选择的月份
				monthtime: '',
				//选择的天数
				daytime: '',
				yeartime1: '',
				//选择的月份
				monthtime1: '',
				//选择的天数
				daytime1: '',
				date: null,
				date1: null,

				currentTime: '1',
				createTime1: '1',


				classify: '请选择搭子类型',
				place: '请选择活动地点',
				gender: '请选择搭子性别',
				activityTime: '请选择活动时间',
				expireTime: '请选择结束时间',
				form: {
					// 标题
					name: '',
					// 描述
					desc:'',
					// 允许参加的人数
					allow_join_number:"",
					// 群二维码图
					img:'',
					// 群头像
					head_img:'',
					// 价格
					price:''

				},
				imgFormData: null,
				imgFormData1: null,
				storageMode: "2",
				header: null,
				upPicUrl: null,
				upPicUrl1: null,
				img: [],
				imgStr: [],
				img1: [],
				imgStr1: [],
				tagAddList: [],
				singleLabel: '',
				remnant: 0,
				isEdit: false,
				dimension:'',
				longitude:''

			}
		},
		onLoad(options) {

			if (options.id) {



				const decodedData = {};
				for (const key in options) {
					// 解码当前字段的值
					const decodedValue = decodeURIComponent(options[key]);

					// 将解码后的值存储到新的对象中
					decodedData[key] = decodedValue;
				}


                this.form.id=decodedData.id
				this.$sun.assignObject(this.form, {
					...decodedData
				})
				this.init(this.form)
				this.place = this.form.address
				console.log(this.form)
				this.isEdit = true
                this.classify=decodedData.name
			}
		},
		onShow() {
			this.$at.releaseKey('submit');
			
		},
		methods: {

			init(options) {
				this.$nextTick(() => {
			
					this.$refs.selectimgandupload1.setItems([options.head_img]);
					
					this.$refs.selectimgandupload.setItems([options.img]);
				})
           
			},
			convertTimestampToDate(timestamp) {
				// 创建一个新的Date对象，传入时间戳作为参数
				const date = new Date(timestamp * 1000); // 时间戳以秒为单位，因此需要乘以1000转换为毫秒

				// 提取年、月、日
				const year = date.getFullYear(); // 获取年份
				const month = date.getMonth() + 1; // 月份是从0开始计数的，因此需要加1
				const day = date.getDate(); // 获取日期

				// 返回包含年、月、日的对象
				return {
					year: year,
					month: month,
					day: day
				};

			},
			releaseFn() {

				this.$at.uniDoFunc({
					key: 'submit',
					success: async () => {
						this.$at.lockKey('submit');
						// 登录 需要进行判断当前账号密码 和账号归属店铺及角色是否又选择
						if (!this.form.name) {
							this.$sun.toast("请填写标题", 'none')
							this.$at.releaseKey('submit');
						} else if (!this.form.desc) {
							this.$sun.toast("请填写副标题", 'none')
							this.$at.releaseKey('submit');
						}else if (!this.form.allow_join_number) {
							this.$sun.toast("请填写允许参加人数", 'none')
							this.$at.releaseKey('submit');
						} else if (!this.form.price) {
							this.$sun.toast("请填写入群金额", 'none')
							this.$at.releaseKey('submit');
						} else if (!this.form.img) {
							this.$sun.toast("请上传群二维码图", 'none')
							this.$at.releaseKey('submit');
						} else if (!this.form.head_img) {
							this.$sun.toast("请上传群头像", 'none')
							this.$at.releaseKey('submit');
						}  else {
							console.log(this.form)

							const saveOrUpdate = this.isEdit ? this.$api.editCommunity : this.$api.addCommunity;
							const result = await this.$http.post({
								url: saveOrUpdate,
								data: {
									...this.form

								},
								headers: {
									'Authorization': this.userInfo.token
								}

							})
							if (result.code == 0) {

								this.$sun.toast(result.message, 'none')
								uni.removeStorageSync('tabClassIfy')
								setTimeout(()=>{
									this.$sun.navBack()
								},500)



							} else {
								this.$sun.toast(result.message, 'none')
							}

							this.$at.releaseKey('submit');
						}
					}
				});


			},

			// 日期获取
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;

				return `${year}-${month}-${day}`;

			},

			bindDateChange(e) {


				this.createTime = e.detail.value
				console.log(e.detail.value)
				this.form.activity_time = e.detail.value
				this.date = e.target.value;
				/* 在上面声明变量，split是用来截取字段*/
				this.yeartime = this.date.split('-')[0];
				this.monthtime = this.date.split('-')[1];
				this.daytime = this.date.split('-')[2];


			},
			bindDateChange1(e) {

				console.log(e)
				this.createTime1 = e.detail.value
				this.form.expire_time = e.detail.value
				this.date1 = e.target.value;
				/* 在上面声明变量，split是用来截取字段*/
				this.yeartime1 = this.date1.split('-')[0];
				this.monthtime1 = this.date1.split('-')[1];
				this.daytime1 = this.date1.split('-')[2];


			},
			handleApplyType(e) {
				let val = e.detail.value;
				this.form.sex = val;
				console.log(e.detail.value);
			},
			// 备注
			descInput(e) {
				this.remnant = e.detail.value.length;
				if (this.remnant >= 50) {
					this.$sun.toast('说明字数已达上限');
				}
			},
			location() {
				uni.chooseLocation({
					success: res => {
						this.form.address = res.name;
						this.place = res.name;
						this.form.dimension =  res.latitude;
						this.form.longitude =res.longitude ;
						console.log('获取定位信息res============', res);
					}
				});
			},
			subTypeFn() {

				this.$sun.navGo('/pages/index/classifyAll')
			},
			// ‘添加标签’弹出框
			addTag() {
				this.$refs.pop.show({
					anim: 'center',
					shadeClose: false,
					topclose: false
				});
			},
			// 弹窗——添加/修改单个标签
			singleLabelClick() {
				if (!this.singleLabel) {
					this.$sun.toast('请先输入标签');
				} else {
					this.updateTags();
				}
			},
			// 技师员工标签添加修改
			async updateTags() {
				// const result = await this.$http.put({
				// 	url: this.$api.updatePersonalTags,
				// 	data: {
				// 		id: '2', //修改时传值
				// 		label: this.singleLabel //添加的标签值
				// 	}
				// });


				this.$sun.toast('添加成功！');
				this.addTag2()
				this.closeTag();
			},

			// 关闭 ‘添加标签’弹出框
			closeTag() {
				this.$refs.pop.close();
			},
			//删除标签
			deleteTag(item) {
				console.log(item);
				// 2种删除方式
				// this.tagDeleteList.splice(this.tagDeleteList.indexOf(item), 1);
				this.tagAddList = this.tagAddList.filter(o => {
					return o !== item;
				});
			},
			//添加标签input框回车事件
			addTag2() {
				this.tagAddList.push(this.singleLabel);
				this.form.label = this.tagAddList.join(",")
				this.singleLabel = '';
			},
			// 上传图片返回
			imgLoaded(e) {
				console.log(e)

				this.img = [];
				for (let i = 0; i < e.length; i++) {
					this.img.push(e[i].url);
				}


				this.imgStr = this.img

				this.form.img = this.imgStr.length === 1 ? this.imgStr[0].toString() : this.imgStr
					.join(',');
			},

			imgsChange(file) {

				console.log('上传发生改变this.storageMode1111============', this.storageMode, '参数file', file);


				if (file.length) {
					this.upPicUrl = this.$api.upload;
					let filesNmae = 'nmoBackground_01.png'; // this.timeDate + 'png'
					this.imgFormData = {
						file: file,
						getsize: file.size,
						getContentType: ['image/png', 'image/jpeg'],
						getoriginalfilename: filesNmae,
						getName: filesNmae
					};
					this.$nextTick(() => {
						this.$refs.selectimgandupload.upload(); //图片上传
					});
				} else {
					this.form.img = '',
						this.imgStr = []
				}
				// this.niuyunLoop(file,0)

			},

			imgLoaded1(e) {
				console.log(e)

				this.img1 = [];
				for (let i = 0; i < e.length; i++) {
					this.img1.push(e[i].url);
				}


				this.imgStr1 = this.img1

				this.form.head_img = this.imgStr1.length === 1 ? this.imgStr1[0].toString() : this.imgStr1
					.join(',');
					
				
			},

			imgsChange1(file) {

				console.log('上传发生改变this.storageMode1111============', this.storageMode, '参数file', file);


				if (file.length) {
					this.upPicUrl1 = this.$api.upload;
					let filesNmae = 'nmoBackground_01.png'; // this.timeDate + 'png'
					this.imgFormData1 = {
						file: file,
						getsize: file.size,
						getContentType: ['image/png', 'image/jpeg'],
						getoriginalfilename: filesNmae,
						getName: filesNmae
					};
					this.$nextTick(() => {
						this.$refs.selectimgandupload1.upload(); //图片上传
					});
				} else {
					this.form.head_img = '',
						this.imgStr1 = []
				}
				// this.niuyunLoop(file,0)

			},
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			startDate1() {
				return this.getDate('start');
			},
			endDate1() {
				return this.getDate('end');
			},
			currentTimeFn() {
				return function(currentIndex) {
					if (currentIndex == '1') {
						// 日
						return 'day';

					} else if (currentIndex == '2') {
						// 月
						return 'month';
					} else if (currentIndex == '3') {
						// 年
						return 'year';
					}
				};
			},
			currentTimeFn1() {
				return function(currentIndex) {
					if (currentIndex == '1') {
						// 日
						return 'day';

					} else if (currentIndex == '2') {
						// 月
						return 'month';
					} else if (currentIndex == '3') {
						// 年
						return 'year';
					}
				};
			}




		},
	}
</script>

<style lang="less" scoped>
	.bgIndex {
		.bg {

			height: 392.42rpx;
		}

		.rightInput {

			input {
				text-align: right;
			}
		}

		.buildingInformation {
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			// margin-top: -20rpx;
			z-index: 50;
			position: relative;
			background: rgb(255, 255, 255);

			.myNmae {

				background-color: #fff;
				min-width: 50rpx;

				.avatar {
					width: 84rpx;
					height: 84rpx;
				}

				input {
					text-align: right;
				}

				.backgroundImg {

					height: 154rpx;


				}

			}
		}

		.personalTags {
			margin: 36rpx 0;

			.tag_container {
				margin-top: 36rpx;
				display: flex;
				align-items: center;
				flex-direction: row;
				// justify-content: space-between;
				flex-wrap: wrap;
			}

			.zy_tag_add {
				width: 150rpx;

				height: 50rpx; //medium：45rpx；small：40rpx；mini：35rpx
				padding: 5rpx 15rpx;
				margin: 5rpx 8rpx;
				border: 2rpx solid rgb(237, 237, 237);
				border-radius: 10rpx;
				text-align: center;
			}
		}

		.release {
			width: 716rpx;
			margin: 0 20rpx;
			height: 102rpx;
			border-radius: 142rpx;
			color: #fff;
			background: rgb(120, 93, 246);
			bottom: 20rpx;
			position: fixed;
		}

		.textarea-box {
			margin-top: 24rpx;
			border: 2rpx dashed #1e6ceb;
			background: #fff;
			padding: 30rpx;
			border-radius: 20rpx;

			.textarea-color {
				text-align: right;
				color: #999;
			}
		}

		// “添加标签” 弹出框
		.v-pop-cls {
			padding: 46rpx 0 88rpx;
			width: 710rpx;
			height: auto;
			position: relative;
			border-radius: 20rpx;
			background: #fff;

			image {
				width: 52rpx;
				height: 52rpx;
				position: absolute;
				padding: 30rpx;
				top: 0rpx;
				right: 0rpx;
			}

			text {
				color: #000;
				font-size: 36rpx;
			}

			input {
				// text-align: center;
				padding: 0 20rpx;
				width: 608rpx;
				height: 94rpx;
				margin: 62rpx 0;
				border-radius: 20rpx;
				background: #f5f5f5;
			}

			.add {
				width: 638rpx;
				height: 88rpx;
				background: #1890ff;
				color: #fff;
				font-size: 32rpx;
			}
		}
	}
</style>